<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Music Player</title>
  <link rel="stylesheet" href="../assets/css/normalize.css">
  <link rel="stylesheet" href="../assets/css/font-awesome.css">
  <link rel="stylesheet" href="../assets/css/app.css">
  <!-- <link href="http://fonts.useso.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css"> -->
</head>

<body class="page">

    <div id="app">
            <router-link to="/user/profile">Go to Foo</router-link>
            <router-link to="/user/posts">Go to Foo</router-link>
            <router-view></router-view>
    </div>
    
  <script src="../libs/vue/vue.js"></script>
  <script src="../libs/vue-router/vue-router.js"></script>
  <script src="../libs/vue-resource/vue-resource.js"></script>
    <script>
    const UserProfile = {
        template: '<div>UserProfile</div>'
    }
    const UserPosts = {
        template: '<div>UserPosts</div>'
    }
    const User = {
       // template: '<div>User {{ $route.params.id }}</div>'
       template: `
        <div class="user">
        <h2>User {{ $route.params.id }}</h2>
        <router-view></router-view>
        </div>
        `
    }
    const router = new VueRouter({
        routes: [
            { 
                path: '/user/:id', 
                component: User ,
                children: [
                    {
                        // 当 /user/:id/profile 匹配成功，
                        // UserProfile 会被渲染在 User 的 <router-view> 中
                        path: 'profile',
                        component: UserProfile
                    },
                    {
                        // 当 /user/:id/posts 匹配成功
                        // UserPosts 会被渲染在 User 的 <router-view> 中
                        path: 'posts',
                        component: UserPosts
                    }
                ]
            }
        ]
    });

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
        router
    }).$mount('#app')

    </script>
</body>

</html>
